<template>
  <glsx-dialog :show="value" title="预约跟进" width="30%" :appendtobody="true" @close="closeDialog">
    <!-- <follow-book v-if="showBookDialog" :id="selectItem.id" :name="selectItem.name" :phone="selectItem.mobile" @change="onChange"></follow-book> -->
    <div class="">
      <el-form ref="form" :model="form" :rules="formRules" size="small" label-width="80px">
        <el-form-item label="客户id" prop="customerId">
          <el-input class="a_input" v-model="form.customerId" readonly></el-input>
        </el-form-item>
        <el-form-item label="客户姓名" prop="customerName">
          <el-input class="a_input" v-model="form.customerName"></el-input>
        </el-form-item>
        <el-form-item label="客户电话" prop="customerPhone">
          <el-input class="a_input" v-model="form.customerPhone"></el-input>
        </el-form-item>
        <el-form-item label="预约时间" prop="appointmentTime">
          <el-date-picker v-model="form.appointmentTime" type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="预约说明">
          <el-input type="textarea" rows="3" resize="none" class="a_input" v-model="form.remark"></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" :loading="loading" @click="saveInfo">提交预约</el-button>
        </el-form-item>
      </el-form>
    </div>
  </glsx-dialog>
</template>
<script>
import { ADD_APPOINTMENT_INFO } from "@/http/customer";
import { deepClone, showToast } from "@/utils/util";
export default {
  name: "FollowBook",
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    id: {
      type: [String, Number],
      default: "",
    },
    name: {
      type: String,
      default: "",
    },
    phone: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      form: {},
      formRules: {
        customerId: [
          { required: true, message: "请输入客户id", trigger: "blur" },
        ],
        customerName: [
          { required: true, message: "请输入客户姓名", trigger: "blur" },
        ],
        customerPhone: [
          { required: true, message: "请输入客户电话", trigger: "blur" },
        ],
        appointmentTime: [
          { required: true, message: "请选择预约时间", trigger: "change" },
        ],
      },
      loading: false,
    };
  },
  watch: {
    id: {
      handler: function (n, o) {
        this.$set(this.form, "customerId", n);
      },
    },
    name: {
      handler: function (n, o) {
        this.$set(this.form, "customerName", n);
      },
    },
    phone: {
      handler: function (n, o) {
        this.$set(this.form, "customerPhone", n);
      },
    },
  },
  created() {
    // this.$set(this.form, "customerId", this.id);
    // this.$set(this.form, "customerName", this.name);
    // this.$set(this.form, "customerPhone", this.phone);
  },
  mounted() {},
  methods: {
    // 保存信息
    saveInfo() {
      let _this = this;
      _this.$refs.form.validate((valid) => {
        if (!valid) {
          return false;
        }
        let oParams = deepClone(_this.form);
        _this.loading = true;
        ADD_APPOINTMENT_INFO(oParams).then((res) => {
          _this.loading = false;
          if (res.code == 200) {
            showToast({
              message: "新增成功",
              type: "success",
            });
            _this.closeDialog();
            //_this.$emit("change", true);
          }
        });
      });
    },

    // 关闭弹框
    closeDialog() {
      this.$emit("input", false);
    },
  },
};
</script>
<style lang="scss" scoped>
</style>